<!--
 * @Description: rtsp_ffmpeg_node_websoket_flv   此方案需启动node服务,server
 * @Author: xuzp4
 * @Date: 2021-11-17 10:25:01
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-09-23 14:01:35
 * @FilePath: \vue_demo\src\view\video3\rtsp2flv2.vue
-->
<template>
  <div>
    <video class="demo-video" ref="player" muted autoplay controls></video>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
    //   rtsp: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4",
      // rtsp: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4",
      // rtsp:'rtsp://192.169.9.251:554/openUrl/VcWlEvC',
      // rtsp:'rtsp://admin:QJMK123456@111.56.26.114:800/Streaming/Channels/102',
      rtsp:'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4',
      // rtmp:'rtmp://ns8.indexforce.com/home/mystream',
      rtmp:'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp',
      beginTime:'20220921T111543',
      endTime:'20220921T111943',
      playBackMode:'1',
      player: null,
      id:'1'
    };
  },
  mounted() {
    if (flvjs.isSupported()) {
      let video = this.$refs.player;
      if (video) {
        this.player = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          // url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`,
          url: `ws://localhost:8888/rtmp/${this.id}/?url=${this.rtmp}`,
        });
        this.player.attachMediaElement(video);
        try {
          this.player.load();
          this.player.play();
        } catch (error) {
          console.log(error);
        }
      }
    }
  },
  beforeDestroy() {
    this.player.destory();
  },
};
</script>
<style>
.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>